import "./index.scss"
import { Button, Form, Input, Select, DatePicker, Table, Modal, notification } from 'antd';
import React, { useEffect, useState } from 'react';
import type { DatePickerProps } from 'antd';
import service from "../../../../api";
import { LockFilled } from "@ant-design/icons";
import { useNavigate } from "react-router-dom"

const { Option } = Select;

// const tailLayout = {
//     wrapperCol: { offset: 8, span: 16 },
// };

const Coupon = () => {
    var [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();
    var [flag, setFlag] = useState(false)
    var [myid, setmyid] = useState()
    var navigate = useNavigate()

    var [couponlist, setcouponlist] = useState([{
        "couponname": "",
        "OfferContent": "",
        "typesof": "",
        "Received": "",
        "residue": "",
        "state": "",
        "time": ""
    }])
    const onmyFinish = (values: any) => {
        console.log(values);

        if (values.time != undefined) {
            values.time = values.time.$d.toLocaleString()
        }
        var a = couponlist.filter((item: any) => values.couponname ? item.couponname.includes(values.couponname) : couponlist)
        var b = a.filter((item: any) => values.typesof ? item.typesof.includes(values.typesof) : a)
        var c = b.filter((item: any) => values.state ? item.state.includes(values.state) : b)
        var d = c.filter((item: any) => values.time ? item.time == values.time : c)
        setcouponlist(d)
    };

    const onReset = () => {
        getcouponlist()
        form.resetFields();
    };

    var onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    //请求
    useEffect(() => {
        getcouponlist()
    }, [])
    var getcouponlist = async () => {
        var res = await service.coupon.xlq_couponlist()
        if (res.status == 200) {
            res.data.forEach((item: any, index: any) => {
                return item.key = index;
            })
            setcouponlist(res.data)
        }
    }
    //表格
    var columns: any = [
        {
            title: '优惠劵名称',
            dataIndex: 'couponname',
            key: 'couponname'
        },
        {
            title: '优惠内容',
            dataIndex: 'OfferContent',
            key: 'OfferContent'
        },
        {
            title: '类型',
            dataIndex: 'typesof',
            key: 'typesof'
        },
        {
            title: '已领取',
            dataIndex: 'Received',
            key: 'Received'
        },
        {
            title: '剩余',
            dataIndex: 'residue',
            key: 'residue'
        },
        {
            title: '状态',
            key: 'state',
            render: (a: any, cold: any, index: any) => <>
                <span className={`span ${cold.state == '上线中' ? 'lv' : ''}`}>{cold.state}</span>
            </>
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time'
        },
        {
            title: '操作',
            dataIndex: 'operate',
            key: 'operate',
            render: (a: any, cold: any, index: any) => <>
                <a onClick={() => handletoshuju(cold.id)}>数据</a>
                <a onClick={() => handlexiaxian(cold)}>下线</a>
                <a onClick={() => showModal(cold)}>编辑</a>
                <a onClick={() => handledemove(cold.id)}>删除</a>
            </>,
        }
    ]
    // 弹框

    var showModal = (cold: any) => {
        if (typeof (cold.id) == 'number') {//说明是编辑
            setFlag(true)
            form.setFieldsValue({
                "couponname": cold.couponname,
                "OfferContent": cold.OfferContent,
                "typesof": cold.typesof,
                "Received": cold.Received,
                "residue": cold.residue,
                "state": cold.state
            })
            setmyid(cold.id)
        }
        setIsModalOpen(true);
    };

    var handleCancel = () => {
        form.setFieldsValue({
            "couponname": "",
            "OfferContent": "",
            "typesof": "",
            "Received": "",
            "residue": "",
            "state": "",
            "time": ''
        })
        setIsModalOpen(false);
    };
    var myobj = {
        "volume": "782356",
        "Totalamount": "643471",
        "voucherpen": "2374980",
        "Oldusers": "18490",
        "newuser": "2379380",
        "myechars": {
            "x": [
                "06/16",
                "06/17",
                "06/18",
                "06/19",
                "06/20",
                "06/21",
                "06/22",
                "06/23",
                "06/24",
                "06/25"
            ],
            "visitor": [
                5250,
                3780,
                2660,
                2886,
                4780,
                2250,
                5780,
                6660,
                4886,
                2780
            ],
            "payment": [
                4670,
                9280,
                1198,
                3675,
                5230,
                770,
                180,
                6798,
                2675,
                5230
            ]
        }
    }
    var ontankuangFinish = async (value: any) => {//点击新增
        value.time = value.time.$d.toLocaleString()
        if (flag) {//说明是编辑
            var res = await service.coupon.xlq_couponsave({ id: myid, data: value })
            setFlag(false)
        } else {
            value.shuju = myobj
            var res = await service.coupon.xlq_couponadd(value)
        }
        if (res.status == 200 || res.status == 201) {
            notification.success({ message: flag ? '修改成功' : '新增成功' })
            getcouponlist()
            form.setFieldsValue({
                "couponname": "",
                "OfferContent": "",
                "typesof": "",
                "Received": "",
                "residue": "",
                "state": "",
                "time": ''
            })
            setIsModalOpen(false);
        }
    }
    //删除
    var handledemove = async (id: any) => {
        var res = await service.coupon.xlq_coupondelete({ id })
        if (res.status == 200 || res.status == 201) {
            notification.success({ message: '删除成功' })
            getcouponlist()
            setIsModalOpen(false);
        }
    }
    //下线
    var handlexiaxian = async (cold: any) => {
        if (cold.state == '已下线') {
            notification.error({ message: '该优惠券已处于下线状态' })
        } else {
            var res = await service.coupon.xlq_couponxiaxian({ id: cold.id, data: { "state": "已下线" } })
            if (res.status == 200 || res.status == 201) {
                notification.success({ message: '下线成功' })
                getcouponlist()
            }
        }
    }
    //跳转展示数据
    var handletoshuju = (id: any) => {
        navigate({ pathname: '/index/couponshuju', search: 'id=' + id });
    }
    return (
        <div className='coupon'>
            <div className="top">
                <Button type="primary" onClick={showModal}>新增优惠券</Button>
            </div>
            <div className="nav">
                <Form
                    form={form}
                    name="control-hooks"
                    onFinish={onmyFinish}
                    style={{ width: '100%' }}
                >
                    <div className="top1">
                        <Form.Item name="couponname" label="劵名" >
                            <Input />
                        </Form.Item>
                        <Form.Item name="typesof" label="类型" >
                            <Select
                                placeholder="全部"
                                // onChange={onGenderChange}
                                allowClear
                                style={{ width: 200 }}
                            >
                                <Option value="全部">全部</Option>
                                <Option value="满减劵">满减劵</Option>
                                <Option value="折扣券">折扣券</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="state" label="状态" >
                            <Select
                                placeholder="全部"
                                // onChange={onGenderChange}
                                allowClear
                                style={{ width: 200 }}
                            >
                                <Option value="全部">全部</Option>
                                <Option value="上线中">上线中</Option>
                                <Option value="已下线">已下线</Option>
                            </Select>
                        </Form.Item>
                    </div>
                    <div className="boom1">
                        <div className="time">
                            <Form.Item name="time" label="创建时间" >
                                <DatePicker onChange={onChange} />
                            </Form.Item>
                        </div>

                        <Form.Item >
                            <div className="btn">
                                <Button type="primary" htmlType="submit"
                                    style={{ marginRight: 20 }}>
                                    搜索
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </div>
                        </Form.Item>
                    </div>
                </Form>
            </div>
            <div className="bottm">
                <Table columns={columns} dataSource={couponlist} bordered={true} />
            </div>
            {/* 弹框 */}
            <Modal title={flag ? '确认修改' : '确认新增'} open={isModalOpen} footer={null} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={ontankuangFinish}
                    autoComplete="off"
                >
                    {/* 计划名称 */}
                    <Form.Item
                        label="优惠劵名称"
                        name="couponname"
                        rules={[{ required: true, message: '请输入优惠劵名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="优惠内容"
                        name="OfferContent"
                        rules={[{ required: true, message: '请输入优惠内容!' }]}
                    >
                        <Input />
                    </Form.Item>
                    {/* 计划方式 */}
                    <Form.Item name="typesof" label="类型" rules={[{ required: true, message: '请输入类型!' }]}>
                        <Select
                            allowClear
                        >
                            <Option value="满减劵">满减劵</Option>
                            <Option value="折扣券">折扣券</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="已领取"
                        name="Received"
                        rules={[{ required: true, message: '请输入已领取内容!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="剩余"
                        name="residue"
                        rules={[{ required: true, message: '请输入剩余内容!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="state" label="状态" rules={[{ required: true, message: '请输入状态!' }]}>
                        <Select
                            allowClear
                        >
                            <Option value="上线中">上线中</Option>
                            <Option value="已下线">已下线</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="创建时间"
                        name="time"
                        rules={[{ required: true, message: '请输入创建时间!' }]}
                    >
                        <DatePicker />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 12, span: 16 }}>
                        <Button onClick={handleCancel}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 10 }}>
                            {flag ? '确认修改' : '确认新增'}
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default Coupon;